<template>
	<view class="container">
		<mescroll-body bottom="100rpx" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="album-main-group">
				<u-checkbox-group active-color="#F85962">
					<view class="album-main-image" v-for="(item, index) in photoList" :key="item.file_id" @tap.stop="checkImage(index)">
						<view class="album-image-checkbox" v-if="item.checked"><u-checkbox width="44rpx" height="44rpx" size="44" v-model="item.checked" :name="item.file_id" shape="circle"></u-checkbox></view>
						<!--  -->
						<u-image :class="{ checked: item.checked }" width="100%" height="100%" :src="item.file.file_path"></u-image>
					</view>
				</u-checkbox-group>
			</view>
		</mescroll-body>
		<view class="album-footer">
			<!-- #ifdef APP-PLUS -->
			<view class="album-footer-item" @tap.stop="downloadPhotoList"><u-icon label="下载到手机" label-size="26" name="download" size="32" margin-left="20"></u-icon></view>
			<!-- #endif -->
			<view class="album-footer-item" @tap.stop="deletePhotoList"><u-icon label="删除照片" label-size="26" name="trash" size="32" margin-left="20"></u-icon></view>
		</view>
	</view>
</template>

<script>
import Url from '@/common/http/url.js';
import moment from '@/utils/Moment.js';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			upOption: {
				textNoMore: '-- 没有更多照片了 --',
				toTop: {
					src: ''
				},
				page: {
					size: 30
				}
			},
			photoList: []
		};
	},
	onReady() {},

	methods: {
		checkboxGroupChange(e) {
			console.log(e);
		},
		checkImage(i) {
			console.log(i);
			this.$set(this.photoList[i], 'checked', !this.photoList[i].checked);
		},
		upCallback(mescroll) {
			this.$u.api
				.getAlbumPhoto(mescroll.num)
				.then(res => {
					if (res.code == 200) {
						const data = res.data.list;
						const list = data.data;
						if (mescroll.num == 1) {
							this.photoList = list;
						} else {
							this.photoList.push(...list);
						}
						this.mescroll.endBySize(list.length, data.total);
					} else {
						this.mescroll.endErr();
					}
				})
				.catch(e => {
					this.mescroll.endErr();
				});
		},
		downloadPhotoList() {
			const checkImageList = this.getCheckImageList();
			if (checkImageList.list.length > 0) {
				uni.showLoading({
					mask: true,
					title: '下载中'
				});
				const total = checkImageList.list.length;
				let completeCount = 0;
				for (let i = 0; i < total; i++) {
					console.log(checkImageList.list[i].file.file_path);
					uni.downloadFile({
						url: checkImageList.list[i].file.file_path,
						success: file => {
							uni.saveImageToPhotosAlbum({
								filePath: file.tempFilePath,
								complete: () => {
									completeCount = completeCount + 1;
									if (completeCount == total) {
										uni.showToast({
											title: '下载完成'
										});
									}
								}
							});
						},
						fail: () => {
							completeCount = completeCount + 1;
							if (completeCount == total) {
								uni.showToast({
									title: '下载完成'
								});
							}
						}
					});
				}
			}
		},
		deletePhotoList() {
			const checkImageList = this.getCheckImageList();
			if (checkImageList.ids.length > 0) {
				uni.showModal({
					title: '操作提示',
					content: '删除后将不可恢复，确认是否删除',
					success: result => {
						if (result.confirm) {
							this.$u.api.deleteAlbumPhoto(checkImageList.ids.join(',')).then(res => {
								this.mescroll.resetUpScroll(true);
							});
						}
					}
				});
			} else {
				this.$u.toast('请选择图片');
			}
		},
		getCheckImageList() {
			const list = [];
			const ids = [];
			for (let i = 0; i < this.photoList.length; i++) {
				if (this.photoList[i].checked) {
					list.push(this.photoList[i]);
					ids.push(this.photoList[i].album_id);
				}
			}
			return { list, ids };
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.checked {
	opacity: 0.4 !important;
}
.album-main-group {
	padding: 25rpx 0;
	display: flex;
	flex-wrap: wrap;
	.album-main-image {
		height: 248rpx;
		width: 248rpx;
		margin-bottom: 3rpx;
		margin-left: 3rpx;
		position: relative;
		&:nth-child(3n + 1) {
			margin-left: 0;
		}
		.album-image-checkbox {
			position: absolute;
			top: 8rpx;
			right: 12rpx;
			z-index: 20;
			height: 44rpx;
			width: 44rpx;
			border-radius: 44rpx;
		}
		.album-image-progress-content {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #333;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			.album-image-progress-info {
				margin-bottom: 2rpx;
				font-size: 28rpx;
			}
			.album-image-progress-number {
				font-size: 24rpx;
			}
		}
	}
}
.album-footer {
	position: relative;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		height: 1rpx;
		left: 0;
		right: 0;
		background-color: #e5e5e5;
	}
	.album-footer-item {
		flex: 1;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		&::before {
			content: '';
			position: absolute;
			top: 30rpx;
			bottom: 30rpx;
			width: 1rpx;
			left: 0;
			background-color: #e5e5e5;
		}
		&:nth-child(1) {
			&::before {
				display: none;
			}
		}
	}
}
</style>
